<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <div class="logo-con">
          <a href="#"><img :src="logo" /></a>
        </div>
        <i-menu accordion theme="dark" width="auto" :class="menuitemClasses">
          <Menu-item name="0" to="/admin/index">
            <Icon type="md-globe"></Icon>
            <span>首页统计</span>
          </Menu-item>
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-contacts" />
              机构管理
            </template>
            <Menu-item to="/admin/org_maintenance" name="1-1">
              <Icon type="ios-list"></Icon>
              机构列表
            </Menu-item>
            <Menu-item to="/admin/org_admin" name="1-2">
              <Icon type="ios-person" />
              机构管理员
            </Menu-item>
            <Menu-item to="/admin/org_teacher" name="1-3">
              <Icon type="ios-person" />
              教师管理
            </Menu-item>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-contact" />
              学生管理
            </template>
            <Menu-item to="/admin/student" name="2-1">
              <Icon type="ios-list"></Icon>
              学生列表
            </Menu-item>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-school" />
              课程管理
            </template>
            <Menu-item to="/admin/small-class" name="3-1">
              <Icon type="ios-list"></Icon>
              小班课直播
            </Menu-item>
            <Menu-item to="/admin/classes" name="3-2">
              <Icon type="ios-list"></Icon>
              直播课程
            </Menu-item>
            <Menu-item to="/admin/on-demand" name="3-3">
              <Icon type="ios-list"></Icon>
              点播课程
            </Menu-item>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="ios-school" />
              新闻通知
            </template>
            <Menu-item to="/admin/news/news-list" name="4-1">
              <Icon type="ios-list"></Icon>
              新闻列表
            </Menu-item>
            <Menu-item to="/admin/news/notification-list" name="4-2">
              <Icon type="ios-person" />
              通知列表
            </Menu-item>
            <Menu-item to="/admin/news/ad-list" name="4-3">
              <Icon type="md-image" />
              广告列表
            </Menu-item>
          </Submenu>
          <!--<Submenu name="5">-->
            <!--<template slot="title">-->
              <!--<Icon type="ios-contact" />-->
              <!--基础数据-->
            <!--</template>-->
            <!--<Menu-item to="/admin/base_grade" name="5-1">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--年级管理-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/base_subject" name="5-2">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--学科管理-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/student" name="5-3">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--教材版本-->
            <!--</Menu-item>-->
          <!--</Submenu>-->
          <Submenu name="6">
            <template slot="title">
              <Icon type="md-bookmark"/>
              系统标签
            </template>
            <Menu-item to="/admin/tags/teacher-label" name="6-1">
              <Icon type="ios-list"></Icon>
              老师标签
            </Menu-item>
            <Menu-item to="/admin/tags/Institution-label" name="6-2">
              <Icon type="ios-list"></Icon>
              机构标签
            </Menu-item>
            <Menu-item to="/admin/tags/course-label" name="6-3">
              <Icon type="ios-list"></Icon>
              课程标签
            </Menu-item>
          </Submenu>
          <Submenu name="7">
            <template slot="title">
              <Icon type="ios-cog" />
              系统设置
            </template>
            <Menu-item to="/admin/system/users" name="7-1">
              <Icon type="ios-list"></Icon>
              系统管理员
            </Menu-item>
            <!--<Menu-item to="/admin/system/role" name="7-2">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--角色管理-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/system/permission" name="7-3">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--权限管理-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/base_subject" name="7-4">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--版本管理-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/base_subject" name="7-5">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--操作日志-->
            <!--</Menu-item>-->
            <!--<Menu-item to="/admin/student" name="7-6">-->
              <!--<Icon type="ios-list"></Icon>-->
              <!--个人资料-->
            <!--</Menu-item>-->
          </Submenu>
        </i-menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" @on-coll-change="handleCollapsedChange" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
          <Dropdown style="margin-right: 40px;float: right;" @on-click="handleClick">
            <a href="javascript:void(0)">{{ name }}
              <img :src="avatar" style="z-index: 9999;float:right;width: 40px;height: 40px;border-radius: 50%;margin-top: 14px;margin-bottom: 14px">
              <Icon type="ios-arrow-down" style="color: transparent"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="modify_password">修改密码</DropdownItem>
              <DropdownItem divided name="logout">退出系统</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <fullscreen v-model="isFullscreen" style="float:right;margin-right: 25px;"/>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
          <router-view></router-view>
        </Content>
        <Footer style="padding-left: 20px !important;padding-bottom: 10px !important;padding-top: 0px !important;">
          <div style="float: left;">多喆科技 &copy;2018 版权所有 侵权必究</div>
          <!--<div style="float: right;"><Button type="primary" icon="ios-bug" style="font-size: 15px;" @click="bugReport">BUG提交</Button></div>-->
        </Footer>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import logo from '@/assets/images/logo.png'
import Fullscreen from '@/components/fullscreen'
import avatar from '@/assets/images/avatar.jpg'
export default {
  components: {
    Fullscreen
  },
  data () {
    return {
      side1: '',
      isCollapsed: false,
      logo,
      avatar,
      isFullscreen: false,
      name: ''
    }
  },
  computed: {
    rotateIcon () {
      return [
        'menu-icon',
        this.isCollapsed ? 'rotate-icon' : ''
      ]
    },
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  created () {
  },
  methods: {
    handleClick (name) {
      if (name === 'modify_password') {
        this.$router.push('/admin/reset-pwd')
      } else {
        localStorage.removeItem('x-token')
        this.$router.push('/index/login')
      }
    },
    collapsedSider () {
      this.$refs.side1.toggleCollapse()
    },
    handleCollapsedChange (state) {
      this.isCollapsed = state
    },
    bugReport () {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>请发送邮件至<a href="mailto:huchengye@fhdream.com">huchengye@fhdream.com</a>报告BUG，注意提交BUG截图，谢谢！</p>',
        onOk: () => {
          window.location.href = 'mailto:huchengye@fhdream.com'
        }
      })
    }
  }
}
</script>

<style scoped>
  .logo-con{
    height: 64px;
    padding: 10px;
  }
  .logo-con img{
    height: 44px;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .layout-con{
    height: 100%;
    width: 100%;
  }
  .layout{
    background: #f5f7f9;
    position: relative;
    border-radius: 0px;
    overflow: hidden;
  }
  .layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
  }
</style>
